/**
* 左边菜单
*/
<template>
  <el-menu default-active="35" :collapse="collapsed" collapse-transition router :default-active="$route.path" unique-opened class="el-menu-vertical-demo" background-color="#334157" text-color="#fff" active-text-color="#ffd04b"  @select="handleMenuSelect">
    <div class="logobox">
      <img class="logoimg" src="../assets/img/logo-1.png" alt="">
    </div>
    <div v-for="menu in allmenu" :key="menu.menuid">
      <!-- 没有子菜单，渲染为 el-menu-item -->
      <el-menu-item v-if="!menu.menus" :index="'/' + menu.url">
        <i class="iconfont" :class="menu.icon"></i>
        <span>{{ menu.menuname }}</span>
      </el-menu-item>

      <!-- 有子菜单，渲染为 el-submenu -->
      <el-submenu v-else :index="menu.menuname">
        <template #title>
          <i class="iconfont" :class="menu.icon"></i>
          <span>{{ menu.menuname }}</span>
        </template>
        <el-menu-item-group>
          <el-menu-item v-for="chmenu in menu.menus" :key="chmenu.menuid" :index="'/' + chmenu.url">
            <i class="iconfont" :class="chmenu.icon"></i>
            <span>{{ chmenu.menuname }}</span>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </div>
  </el-menu>
</template>
<script>
import { menu } from '../api/userMG'
// 默认暴露
export default {
  // 组件名
  name: 'leftnav',
  data() {
    return {
      collapsed: false,
      allmenu: []
    }
  },
  // 创建完毕状态(里面是操作)
  created() {
    // console.log('leftnav')
    // 获取图形验证码
    let res = {
      success: true,
      data: [
        {
          menuid: 1,
          icon: 'icon-cs-manage',
          menuname: '首页',
          hasThird: null,
          url: "index",
          menus: null
        },
        {
          menuid: 2,
          icon: 'icon-cs-manage',
          menuname: '企业管理',
          hasThird: null,
          url: "enterprises/management",
          menus: null
        },
        // {
        //   menuid: 5,
        //   icon: 'icon-cs-manage',
        //   menuname: '测试页面',
        //   hasThird: null,
        //   url: "pay/Config",
        //   menus: null
        // },
        {
          menuid: 3,
          icon: 'li-icon-xitongguanli',
          menuname: '人才信息',
          hasThird: null,
          url: 'talents/index',
          clickable: true,
          menus: [
            {
              menuid: 31,
              icon: 'icon-operation-manage',
              menuname: '人才信息情况',
              hasThird: 'N',
              url: 'talents/index',
              menus: null
            },
            {
              menuid: 32,
              icon: 'icon-operation-manage',
              menuname: '考证学习情况',
              hasThird: 'N',
              url: 'talents/Documents',
              menus: null
            }
          ]
        },
        {
          menuid: 13,
          icon: 'li-icon-dingdanguanli',
          menuname: '运营',
          hasThird: null,
          url: null,
          menus: [
            {
              menuid: 15,
              icon: 'icon-operation-manage',
              menuname: '分销分佣',
              hasThird: 'N',
              url: 'operation/distribution',
              menus: null
            },
            {
              menuid: 16,
              icon: 'icon-operation-manage',
              menuname: '积分设置',
              hasThird: 'N',
              url: 'operation/points',
              menus: null
            },
            {
              menuid: 17,
              icon: 'icon-operation-manage',
              menuname: 'banner管理',
              hasThird: 'N',
              url: 'banner/index',
              menus: null
            },
            {
              menuid: 18,
              icon: 'icon-operation-manage',
              menuname: '推广员管理',
              hasThird: 'N',
              url: 'push/man',
              menus: null
            },
            {
              menuid: 19,
              icon: 'icon-operation-manage',
              menuname: '推广记录',
              hasThird: 'N',
              url: 'push/record',
              menus: null
            },
          ]
        },
        {
          menuid: 25,
          icon: 'li-icon-dingdanguanli',
          menuname: '考证培训',
          hasThird: null,
          url: null,
          menus: [
            {
              menuid: 26,
              icon: 'icon-operation-manage',
              menuname: '考证管理',
              hasThird: 'N',
              url: 'item/item',
              menus: null
            },
          ]
        },
        {
          menuid: 25,
          icon: 'li-icon-dingdanguanli',
          menuname: '培训活动',
          hasThird: null,
          url: null,
          menus: [
            {
              menuid: 27,
              icon: 'icon-operation-manage',
              menuname: '培训申请记录',
              hasThird: 'N',
              url: 'train/itemDetail',
              menus: null
            },
            {
              menuid: 28,
              icon: 'icon-operation-manage',
              menuname: '培训活动',
              hasThird: 'N',
              url: 'train/activities',
              menus: null
            }
          ]
        },
        {
          menuid: 31,
          icon: 'li-icon-xitongguanli',
          menuname: '课程与题库',
          hasThird: null,
          url: null,
          menus: [
            {
              menuid: 32,
              icon: 'icon-cus-manage',
              menuname: '在线课程列表',
              hasThird: 'N',
              url: 'onlineCourse/index',
              menus: null
            },
            // {
            //   menuid: 35,
            //   icon: 'icon-cus-manage',
            //   menuname: '已开课学员',
            //   hasThird: 'N',
            //   url: 'onlineCourse/students',
            //   menus: null
            // },
            {
              menuid: 38,
              icon: 'icon-cus-manage',
              menuname: '名师直播',
              hasThird: 'N',
              url: 'onlineCourse/teacherLine',
              menus: null
            },
            // {
            //   menuid: 36,
            //   icon: 'icon-cus-manage',
            //   menuname: '已购买学员',
            //   hasThird: 'N',
            //   url: 'onlineCourse/livePayStudent',
            //   menus: null
            // },
            {
              menuid: 37,
              icon: 'icon-news-manage',
              menuname: '分类题库',
              hasThird: 'N',
              url: 'onlineCourse/classifyTiKu',
              menus: null
            },
            {
              menuid: 34,
              icon: 'icon-news-manage',
              menuname: '模拟考试设置',
              hasThird: 'N',
              url:'onlineCourse/kaoShiSetting',
              menus: null
            }
          ]
        },
        {
          menuid: 41,
          icon: 'li-icon-xitongguanli',
          menuname: '订单管理',
          hasThird: null,
          url: null,
          menus: [
            {
              menuid: 42,
              icon: 'icon-cus-manage',
              menuname: '考证订单',
              hasThird: 'N',
              url: 'order/kaoshiOrder',
              menus: null
            },
            {
              menuid: 43,
              icon: 'icon-news-manage',
              menuname: '课程订单',
              hasThird: 'N',
              url: 'order/courseOrder',
              menus: null
            },
            {
              menuid: 44,
              icon: 'icon-news-manage',
              menuname: '人才套餐订单',
              hasThird: 'N',
              url: 'order/personOrder',
              menus: null
            },
            {
              menuid: 45,
              icon: 'icon-news-manage',
              menuname: '交易账单',
              hasThird: 'N',
              url: 'order/payOrder',
              menus: null
            }
          ]
        },
        {
          menuid: 50,
          icon: 'li-icon-xitongguanli',
          menuname: '专家师资',
          hasThird: null,
          url: 'teachers/teachers',
          menus: null
        },
        {
          menuid: 60,
          icon: 'li-icon-xitongguanli',
          menuname: '职业竞赛',
          hasThird: null,
          url: null,
          menus: [
            {
              menuid: 61,
              icon: 'icon-cus-manage',
              menuname: '竞赛管理',
              hasThird: 'N',
              url: 'pro/index',
              menus: null
            },
            // {
            //   menuid: 62,
            //   icon: 'icon-news-manage',
            //   menuname: '参赛者',
            //   hasThird: 'N',
            //   url: 'pro/proPerson',
            //   menus: null
            // },
            {
              menuid: 63,
              icon: 'icon-news-manage',
              menuname: '结果公示',
              hasThird: 'N',
              url: 'pro/proResult',
              menus: null
            },
          ]
        },
        {
          menuid: 70,
          icon: 'li-icon-xitongguanli',
          menuname: '招聘管理',
          hasThird: null,
          url: null,
          menus: [
            {
              menuid: 71,
              icon: 'icon-cus-manage',
              menuname: '岗位列表',
              hasThird: 'N',
              url: 'recruitManage/jobList',
              menus: null
            },
            {
              menuid: 72,
              icon: 'icon-news-manage',
              menuname: '套餐设置',
              hasThird: 'N',
              url: 'recruitManage/recruitPackage',
              menus: null
            },
            {
              menuid: 73,
              icon: 'li-icon-zhifupeizhi1',
              menuname: '岗位模板设置',
              hasThird: 'N',
              url: 'recruitManage/jobPackage',
              menus: null
            }
          ]
        },
        {
          menuid: 80,
          icon: 'li-icon-xitongguanli',
          menuname: '等级评价机构',
          hasThird: null,
          url: 'levelEvaluation/levelEvaluation',
          menus: null
        },
        {
          menuid: 120,
          icon: 'li-icon-xiangmuguanli',
          menuname: '设置',
          hasThird: null,
          url: null,
          menus: [
            {
              menuid: 121,
              icon: 'icon-provider-manage',
              menuname: '账号信息',
              hasThird: 'N',
              url: 'setting/account',
              menus: null
            },
            {
              menuid: 122,
              icon: 'icon-provider-manage',
              menuname: '基础设置',
              hasThird: 'N',
              url: null,
              menus: null
            },
            {
              menuid: 123,
              icon: 'icon-provider-manage',
              menuname: '客服设置',
              hasThird: 'N',
              url: null,
              menus: null
            },
            {
              menuid: 124,
              icon: 'icon-provider-manage',
              menuname: '员工账号及权限',
              hasThird: 'N',
              url: null,
              menus: null
            },
            {
              menuid: 125,
              icon: 'icon-provider-manage',
              menuname: '通知设置',
              hasThird: 'N',
              url: null,
              menus: null
            },
            {
              menuid: 126,
              icon: 'icon-provider-manage',
              menuname: '数据字典',
              hasThird: 'N',
              url: 'setting/dictionary',
              menus: null
            }
          ]
        }
      ],
      msg: 'success'
    }
          this.allmenu = res.data

    // menu(localStorage.getItem('logintoken'))
    //   .then(res => {
    //     console.log(JSON.stringify(res))
    //     if (res.success) {
    //       this.allmenu = res.data
    //     } else {
    //       this.$message.error(res.msg)
    //       return false
    //     }
    //   })
    //   .catch(err => {
    //     this.$message.error('菜单加载失败，请稍后再试！')
    //   })
    // 监听
    this.$root.Bus.$on('toggle', value => {
      this.collapsed = !value
    })
  },
  methods: {
    handleMenuSelect(url, indexPath) {
      // 手动处理路由跳转（避免 Element UI 默认阻止父级菜单跳转）
      if (url && this.$route.path !== url) {
        this.$router.push(url);
      }
    }
  }
}
</script>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 240px;
  min-height: 400px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  border: none;
  text-align: left;
}
.el-menu-item-group__title {
  padding: 0px;
}
.el-menu-bg {
  background-color: #1f2d3d !important;
}
.el-menu {
  border: none;
}
.logobox {
  height: 40px;
  line-height: 40px;
  color: #9d9d9d;
  font-size: 20px;
  text-align: center;
  padding: 20px 0px;
}
.logoimg {
  height: 60px;
}
</style>
